<template>
	<view class="homePages">
		<!-- 积分 -->
		<view style="position: fixed;width: 100%;z-index: 99;background-color: #eee;">
			<uni-search-bar @confirm="onConfirm" @cancel="onCancel" radius="100" v-model="formData.name"
				placeholder="请输入关键词"></uni-search-bar>
			<image src="../../static/score_bg.png" class="iamgeBoxnav"></image>
			<view class="integral-box">
				<view class="integral-item">
					<text>我的积分：</text>
					<view class="integral-login" @click="getLogin" v-if="!token">登录获取积分值</view>
					<view class="integral-title" v-else>
						{{integralNum}}
					</view>
				</view>
			</view>
			<view class="sort-nav">
				<view class="nav-box">
					<view class="nav-item" :class="{activeNav:navIndex==-1}" @click="changeNav(-1)">
						<view :style="{ color: navIndex === -1 ? '#ff5555' : '#000000' }">综合排名</view>
						<uni-icons :style="{ color: navIndex === -1 ? '#ff5555' : '#000000' }"
							:type="formData.comprehensiveSorting==='asc'?'arrow-up':'arrow-down'" size="20"
							class="nav-icon"></uni-icons>
					</view>
					<view class="nav-item" :class="{activeNav:navIndex==0}" @click="changeNav(0)">
						<view :style="{ color: navIndex === 0 ? '#ff5555' : '#000000' }">
							人气
						</view>
						<uni-icons :style="{ color: navIndex === 0 ? '#ff5555' : '#000000' }"
							:type="formData.popularityType==='asc'?'arrow-up':'arrow-down'" size="20"
							class="nav-icon"></uni-icons>
					</view>
					<view class="nav-item" :class="{activeNav:navIndex==1}" @click="changeNav(1)">
						<view :style="{ color: navIndex === 1 ? '#ff5555' : '#000000' }">积分</view>
						<uni-icons size="20" class="nav-icon" :style="{ color: navIndex === 1 ? '#ff5555' : '#000000' }"
							:type="formData.integralType==='asc'?'arrow-up':'arrow-down'"></uni-icons>
					</view>
				</view>
				<view class="nav-item2" :class="{activeNav2:navIndex==2}" @click="changeNav(2)">
					<view class="nav-item2-picker">
						<picker mode="selector" :range="list" @change="onChange"
							:style="{ color: navIndex === 2? '#ff5555' : '#000000' }">
							<view class=" picker">
								{{selectedValue}}
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>

		<!-- 排序 -->
		<view style="height: 270rpx;"></view>
		<!-- 列表 -->
		<view class="navList-box">
			<view v-for="(item,index) in navList" :key="index" @click="toListDetail(item.id)" class="navList-item">
				<view style="width: 100%;">
					<image :src="item.imgUrl" lazy-load class="imgUrl-content"></image>
				</view>
				<view class="navList-item-content">
					<text style="font-size: 26rpx" class="goods-namewrap"> {{item.name}}</text>
					<view class="goods-box-show">
						<view class="goods-box-integralCash" v-if="item.redeemIntegral!==0"> {{item.redeemIntegral}}积分
						</view>
						<view class="goods-box-integralCash" v-if="item.money!==0"> {{item.integral}}积分+{{item.money}}现金
						</view>
					</view>
					<view class="integralCashBox">
						<view class="integralCashdrawStatus0">
							我要兑换
						</view>
						<view class="integralCashdrawStatus1" v-if="item.drawStatus===1">
							抽一下({{item.drawIntegral}})
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import request from '@/utils/request.js';
	// import {
	// 	getMemberInfo
	// } from '@/utils/utils.js';
	export default {
		data() {
			return {
				list: ['0-5000', '5000-10000', '10000以上'],
				selectedValue: '选择积分区间',
				formData: {
					current: 1,
					size: 10,
					popularityType: ' ', //人气
					integralType: ' ', //积分
					comprehensiveSorting: "asc", //综合排序,
					integralCountType: '', //积分
					name: '',
				},
				// 积分
				integralNum: '',
				navIndex: -1,
				navList: [],
				token: '',
				total: ''
			};
		},
		onShow() { 
			
			// this.token = uni.getStorageSync('userToken')
			// console.log(this.token ,'tokenHOME')
			// alert('2');
			// if (this.token) {
			// 	this.MemberNum();
			// }
		},
		async onLoad() {
			const appInstance = getApp();
			await appInstance.globalData.loginPromise;
			this.getNavList();
			this.token = uni.getStorageSync('userToken');
			this.MemberNum();
		},
		methods: {
			// 获取会员信息
			async MemberNum() {
				// this.integralNum = await getMemberInfo()
				// console.log(this.integralNum,'134124')
				// uni.setStorageSync('memberNum', this.integralNum)
				// this.$store.commit('m_user/saveMemberNum', this.integralNum);
				await request.post('/member/getIntegral').then(res => {
					if (res.code === 0) {
						this.integralNum = res.data;
						uni.setStorageSync('memberNum', res.data)
					 

					} else {
						return uni.$showMsg(res.msg)
					}
				})

			},
			// 搜索框的回车确认时间
			onConfirm(e) {
				this.navList = []
				this.formData.current = 1
				this.getNavList()
			},
			// 取消时间
			onCancel(e) {},
			reSet() {
				this.formData = {
					current: 1,
					size: 10,
					popularityType: '', //人气
					integralType: '', //积分
					comprehensiveSorting: "", //综合排序,
					integralCountType: '', //积分
				}
			},
			onChange(e) {
				this.selectedResult = this.list[e.detail.value];
				this.formData.integralCountType = this.list[e.detail.value];
				this.navList = []
				this.getNavList()
				this.reSet()
			},

			// 点击有不同的结果
			changeNav(index) {
				this.formData.current = 1
				// 默认排序
				if (index === -1) {
					this.formData.integralType = ''
					this.formData.popularityType = ''
					if (this.formData.comprehensiveSorting === 'desc') {
						this.formData.comprehensiveSorting = 'asc'
					} else {
						this.formData.comprehensiveSorting = 'desc'
					}
				}
				if (index === 1) {
					this.formData.popularityType = ''
					this.formData.comprehensiveSorting = ''
					if (this.formData.integralType === 'desc') {
						this.formData.integralType = 'asc'
					} else {
						this.formData.integralType = 'desc'
					}
				}
				if (index === 0) {
					this.formData.comprehensiveSorting = ''
					this.formData.integralType = ''
					if (this.formData.popularityType === 'desc') {
						this.formData.popularityType = 'asc'
					} else {
						this.formData.popularityType = 'desc'
					}
				}
				this.navList = []
				this.getNavList()
				this.navIndex = index;
			},
			// 去登录
			async getLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			// 请求navList
			async getNavList() {
				await request.post('/api/products/page', this.formData).then(res => {
					if (res.code === 0) {
						this.navList = this.navList.concat(res.data || []);
						this.total = res.total
					} else {
						uni.$showMsg(res.msg)
					}
				});
			},
			// 上拉刷新
			onPullDownRefresh() {
				this.total = 0
				this.formData.current = 1
				this.getNavList(() => uni.stopPullDownRefresh())
			},
			// 下拉加载
			onReachBottom() {
				// 数据加载完毕的处理
				if (this.formData.size * this.formData.current >= this.total) {
					uni.showToast({
						title: '数据加载完毕',
						duration: 2000,
						icon: 'none'
					})
				} else {
					this.formData.current += 1;
					this.getNavList()
				}
			},
			toListDetail(id) {
				uni.navigateTo({
					url: '/subpkg/goods_detail/goods_detail?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss">
	.uni-searchbar__cancel {
		padding-left: 10px;
		line-height: 36px;
		font-size: 14px;
		color: #ff5555 !important;
		cursor: pointer;
	}

	.iamgeBoxnav {
		width: 100%;
		height: 100rpx;
	}

	.integral-box {
		position: absolute;
		top: 120rpx;
		// position: fixed;
		// top: 60rpx;

		.integral-item {
			margin: 0rpx 20rpx 0rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: start;
			font-size: 26rpx;

			.integral-title {
				color: #ff5555;
				line-height: 65rpx;
			}

			.integral-login {
				color: #ff00ff;
				line-height: 65rpx;
				// border-bottom: 1px solid #ff00ff;
			}
		}
	}

	.sort-nav {
		display: flex;
		justify-content: space-between;
		padding: 10px 15px 0px 20px;
		background-color: white;

		.nav-box {
			display: flex;
			justify-content: space-between;
			width: 60%;
			margin-bottom: 10rpx;

			.nav-item {
				display: flex;
				align-items: center;
				font-size: 26rpx;

				& .activeNav {
					color: #ff5555;
				}

			}
		}

		.nav-item2 {
			display: flex;
			flex: 1;
			justify-content: space-evenly;
			font-size: 26rpx;

			& .activeNav2 {
				color: #ff5555;
			}

		}
	}

	.navList-box {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content: space-between;
		margin-top: 2rpx;

		.navList-item {
			display: flex;
			background-color: white;
			flex-direction: column;
			width: 48%;
			margin-bottom: 20rpx;

			.imgUrl-content {

				// border: 1px solid #ff00ff;
				object-fit: contain;
				overflow: hidden;
				/* 防止溢出 */

				max-width: 100%;
				height: 280rpx;
			}

			.navList-item-content {
				margin: 10rpx 20rpx;

				// display: flex;
				// justify-content: space-between;
				.goods-namewrap {
					display: -webkit-box;
					/* 使用Webkit盒模型布局 */
					-webkit-line-clamp: 1;
					/* 显示的行数 */
					-webkit-box-orient: vertical;
					/* 垂直方向排列子元素 */
					overflow: hidden;
					/* 隐藏超出的内容 */
					text-overflow: ellipsis;
					/* 在结尾添加省略号 */
				}

				.goods-box-show {
					height: 50rpx;

					.goods-box-integralCash {
						color: #ff5555;
						font-size: 22rpx;
						font-weight: bold;
					}
				}


				.integralCashBox {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					margin-top: 10rpx;
					font-size: 26rpx;
					margin-top: 15rpx;

					.integralCashdrawStatus0 {
						width: 45%;
						text-align: center;
						line-height: 50rpx;
						border: 1px solid orange;
						color: orange;
						background-color: white;
					}

					.integralCashdrawStatus1 {
						width: 45%;
						line-height: 50rpx;
						text-align: center;
						color: white;
						background-color: orange;
						border: 1px solid orange;
					}
				}
			}

		}

	}

	// }
</style>